Day1 - HTML基礎(一) - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2024 iThome 鐵人賽

DAY 1

Python

Django - 製作網頁一點通系列第 1 篇

Day1 - HTML基礎(一)

16th鐵人賽

telescope

2024-09-15 22:29:26

133 瀏覽

分享至

HTML(Hyper Text Markup Language，超文本標記語言)是一種用於建立網頁的標記語言。

接下來我們將來學習他的標籤，看看HTML能為我們帶來什麼?

標題<h1>~<h6>
段落元素<p>
保持原始樣式<pre>
換行<br>
水平線<hr>
文件中的區域<section>

將以下程式保存為01.html，使用瀏覽器開啟

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>DAY 01</title>
    </head>
    <body>
        <p>hello html</p>
    </body>
</html>

會看到這樣的畫面

逐行說明

<!DOCTYPE html>代表此文件的標記類型為HTML5
<html>和</html>標示這個區間是HTML文件
<head>和</head>存放文件的檔頭
<meta charset='utf-8'>此分HTML的編碼方式是'utf-8'
<title>和</title>設定瀏覽器頁面的標題
<body>和</body>為文件的主體

到這邊你肯定注意到每個標籤的開始都會對應到標籤的結尾，他們是兩兩成對的。

接下來我們將直接嘗試不同種的標籤，看看他們在瀏覽器上所呈現的樣貌。

將以下程式保存為02.html，使用瀏覽器開啟

標題輸出 <hn> 和 </hn>
從h1~h6，1是最大的標題，6是最小的標題

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>DAY 01</title>
    </head>
    <body>
        <h1>標題1</h1>
        <h2>標題2</h2>
        <h3>標題3</h3>
        <h4>標題4</h4>
        <h5>標題5</h5>
        <h6>標題6</h6>
    </body>
</html>

會看到標籤1是最大，標籤6是最小，字的大小依次遞減

將以下程式保存為03.html，使用瀏覽器開啟

<p>和</p>段落元素(即使在程式中換行實際輸出時不會換行)
<br>換行

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>DAY 01</title>
    </head>
    <body>
        <p>沒有
            換行</p>
        <p>有<br>換行</p>
    </body>
</html>

會看使用了<br>段落中的文字才有被換行。沒有使用換行符號，即使在程式中換行，實際上也不會換行。

將以下程式保存為04.html，使用瀏覽器開啟

<pre>和</pre>保持原始文件樣式(在程式中輸入什麼，在網頁中輸出什麼)
<hr> 水平線記號

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>DAY 01</title>
    </head>
    <body>
        <hr>
        <pre>
            從前從前，
            有一個人再森林裡與到Python...
故事結束...
        </pre>
        <hr>
    </body>
</html>

會看到在程式中輸入什麼樣的文字，就會在網頁的對應位置顯示什麼文字。

將以下程式保存為05.html，使用瀏覽器開啟

<section>和</section>標示文件中的區域

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>DAY 01</title>
    </head>
    <body>
        <section>
            <h2>HTML</h1>
            <p>
                超文本標記語言是一種用於建立網頁的標準標記語言。
                HTML是一種基礎技術，常與CSS、JavaScript一起被眾多網站用於設計網頁、網頁應用程式以及行動應用程式的使用者介面。
                網頁瀏覽器可以讀取HTML檔案，並將其彩現成視覺化網頁。
                HTML描述了一個網站的結構語意隨著線索的呈現，使之成為一種標記語言而非程式語言。
            </p>
        </section>
        <section>
            <h2>CSS</h2>
            <p>
                階層式樣式表是一種用來為結構化文件添加樣式的電腦語言，由W3C定義和維護。
                CSS3現在已被大部分現代瀏覽器支援，而下一版的CSS4仍在開發中。 
                CSS不僅可以靜態地修飾網頁，還可以配合各種手稿語言動態地對網頁各元素進行格式化。
            </p>
        </section>
    </body>
</html>

會看到這樣的畫面